import useTimeout from "@/hooks/useTimeout";
import React, { useState } from "react";

const TestUseTimeoutHooks: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  /**
   * 我们原本的目的是在页面渲染完3s后修改一下state，
   * 但是你会发现当state+1后，触发了页面的重新渲染，
   * 就会重新有一个3s的定时器出现来给state+1，既而变成了每3秒+1
   */
  /* setTimeout(() => {
    setCount(count + 1);
  }, 3000); */

  // 使用自定义hooks
  useTimeout(() => {
    setCount(count + 1);
  }, 3000);

  return <h3>Count:{count}</h3>;
};
export default TestUseTimeoutHooks;
